<template>
  <div class="template-index-Lu">
    <commpVxeTable
          :isCanWrap="true"
          :conditionBtnRow="true"
          :key="reCommpVxeTable"
          :config="dataTableConfig"
          :columns="columnsVxe"
          :formItem="formItem"
          @checkboxChange="checkboxChange"
          ref="administrativeOffice"
          @searchEvent="searchEvent"
          @resetEvent="resetEvent"
          >
          <template v-slot:externalOperations="{data}"  >
              <vxe-form-item>
                  <template>
                      <a-button class="blue-btn" @click="addhandle" icon="plus">新增解聘登记</a-button>
                  </template>
              </vxe-form-item>
          </template>
        <template v-slot:operation_fjpfjdz="{row}" data-desc="下文附件">
            <span v-if="row.fjpfjdz">
              <a href="#" v-if="row.fprwh" @click="downloadPdf(row.fjpfjdz)">{{ row.fprwh }}.pdf</a>
              <a href="#" v-else @click="downloadPdf(row.fjpfjdz)">解聘文书.pdf</a>
            </span>
            <span v-else>暂无</span>
          </template>
        <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
              <a-form layout="inline">
                  <a-form-item v-if="row.fjpzt == '解聘完成'">
                      <a-button class="blue-btn" @click="reviseClick(row)" icon="eye">查看</a-button>
                  </a-form-item>
                  <a-form-item v-else>
                      <a-button class="blue-btn" @click="reviseClick(row)" icon="edit">办理</a-button>
                  </a-form-item>
                  <a-form-item v-if="row.fjpzt !== '解聘完成'">
                    <a-button class="red-btn" @click="deletehandle(row)" icon="delete">删除</a-button>
                  </a-form-item>
                  <a-form-item>
                      <a-button class="green-btn" @click="downloadClick(row)" icon="download">下载名单</a-button>
                  </a-form-item>
              </a-form>
          </template>
      </commpVxeTable>
      <increase ref="increaseRef" @success="success"></increase>
  </div>
</template>
<script>
import  commpVxeTable   from '@/components/commp-vxe-table/commp-vxe-table.vue'
import  assessCheckApi  from './service/api'
import increase from './increase.vue'
import { deleteJpdj,exportByJpdj } from './service/index'
export default {
  components: {
      commpVxeTable,increase
  },
  data() {
    return {
          reCommpVxeTable: '',
          dataTableConfig: {
              api: assessCheckApi.jpdjlbPageList,
              rowId: 'id',
              paramet: {}
          },
          columnsVxe: [
              {
                  type: 'checkbox',
                  width: 60,
                  fixed: 'left'
              },{
                  title: '解聘文号',
                  field: 'fjpwh',
              },{
                  title: '解聘文件',
                  field: 'fjpfjdz',
                  slots: {
                    default: 'operation_fjpfjdz',
                  }
              },
              // {
              //     title: '审评员类别',
              //     field: 'fxpjcylb',
              // },
              {
                  title: '解聘时间',
                  field: 'fjpsj',
                  width: 130,
              },{
                  title: '解聘人数',
                  field: 'fjprs',
                  width: 80,
              },{
                  title: '状态',
                  field: 'fjpzt',
                  width: 100,
                  titleInterval:true,
                  slots: {
                  // 使用插槽模板渲染
                      header:'data1_header',
                  },
              },{
                  title: '操作',
                  field: 'jobid',
                  fixed: 'right',
                  width: 300,
                  titleInterval:true,
                  slots: {
                  // 使用插槽模板渲染
                      header:'data2_header',
                      default: 'operation_btn',
                  },
              }
          ],
          formItem: [
              {
                  label: '关键字',
                  model: 'gjz',
              },
          ],
          idList: [],
          formData: {},
      }
  },
  methods: {
      // 勾选
      checkboxChange(val){
          //console.log('已选择',val)
          this.idList = []
          if(val.length){
              val.forEach(item => {
                  this.idList.push(item.id)
              });
          }
      },
      // 搜索
      searchEvent(){
          this.dataTableConfig.paramet = {
              ...this.dataTableConfig.paramet,
          }
      },
      // 重置
      resetEvent(){
          //console.log('重置')
          this.reCommpVxeTable = Date.now()
          this.dataTableConfig.paramet = {
              ...this.dataTableConfig.paramet,
          }
      },
      downloadPdf(href){
        window.open(href,'_blank')
      },
      addhandle(){
        this.$nextTick(() => {
          this.$refs.increaseRef.increaseVisible = true
          this.$refs.increaseRef.getData({},0)
        })
      },
      reviseClick(row){
        //console.log(row)
        this.$nextTick(() => {
          if( row.fjpzt == '解聘完成'){
            this.$refs.increaseRef.getData(row,1)
          } else if(row.fjpzt == '解聘登记') {
            this.$refs.increaseRef.getData(row,0)
          }
          this.$refs.increaseRef.increaseVisible = true
        })
      },
      deletehandle(row){
        // if(this.idList.length == 0){
        //   this.$message.warning('请选择删除项')
        //   return
        // }
        var that = this
        that.$confirm({
          title: '您确定要删除这些申请吗?',
          content: '',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            deleteJpdj({ids: row.id}).then(res => {
              //console.log(res)
              if(res.code == 200){
                that.reCommpVxeTable = Date.now()
                that.$message.success(res.message)
              } else {
                that.$message.warning(res.message)
              }
            })
          },
          onCancel() {
            //console.log('Cancel');
          },
        });
      },
      downloadClick(row){
        let that = this
        that.$confirm({
          title: '您确定要下载当前名单吗?',
          content: '',
          okText: '确定',
          okType: 'info',
          cancelText: '取消',
          onOk() {
            var fileName = row.fprwh?row.fprwh+'解聘名单':'解聘名单'
            exportByJpdj({id: row.id}).then((data) => {
              if (!data) {
                  that.$message.warning('文件下载失败')
                  return
              }
              if (typeof window.navigator.msSaveBlob !== 'undefined') {
                  window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
              } else {
                  let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
                  let link = document.createElement('a')
                  link.style.display = 'none'
                  link.href = url
                  link.setAttribute('download', fileName + '.xls')
                  document.body.appendChild(link)
                  link.click()
                  document.body.removeChild(link) //下载完成移除元素
                  window.URL.revokeObjectURL(url) //释放掉blob对象
              }
            })
          },
          onCancel() {
            //console.log('Cancel');
          },
        });
      },
    // 弹窗关闭
    success(){
      // 刷新表格 清空id数组
      this.$refs.administrativeOffice.resetEvent()
      this.idList = []
    },
  },
}
</script>
